<!DOCTYPE html>
<html>
	<head>
		<title>vue中的列表渲染</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table border="1" id="mytable" width="1000px">
				<thead>
					<tr>
						<th><input type="checkbox" /></th>
						<th>序号</th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody style="text-align: center;">
					<tr v-for="item in books">
						<td><input type="checkbox" name="cb_select" :value="item.id" /></td>
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.tdate}}</td>
						<td>{{item.price}}</td>
						<td>{{item.count}}</td>
						<td>
							<button type="button">编辑</button>
							<button type="button">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<p class="p">
				总价格:￥<span id="span_result"></span>
			</p>
		</div>	
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app', //el:全称为element，将Vue对象挂载到哪个标签元素上。建议使用id
				data: { //定义Vue变量区域
					books: [
						{id: 1,name: '三国演义',tdate: '1899-08-09',price: '60.00',count: 1,account: "hh"},
						{id: 2,name: '水浒传',tdate: '1863-09-10',price: '69.00',count: 1,account: "haha"},
						{id: 3,name: '红楼梦',tdate: '1884-03-12',price: '99.00',count: 1,account: "aa"},
						{id: 4,name: '西游记',tdate: '1900-07-28',price: '9.00',count: 1,account: "aa"}
					],
				},
			})
		</script>
	</body>
</html>
